<template>
  <!-- ===== container start ===== -->
  <div class="container">
    <div class="banner"></div>
    <!-- 关于我们 -->
    <div class="bgc-f9">
      <div class="we w-1200 psr">
        <h3>关于我们</h3>
        <img
          src="@/assets/img/we-reception.png"
          width="614"
          height="385"
          alt="!"
        />
        <div class="reception-text psa">
          <div class="subtitle">
            <h4>橙券</h4>
          </div>
          <p>
            山东鼎信网络科技有限公司(DECENT)成立于2010年，拥有近300人的专业团队，是国内领先的权益营销解决方案提供商之一，是山东省双软认证企业、国家级高新技术企业。
          </p>
          <p>
            公司自主研发的权益营销平台——橙券，运用互联网+精准营销理念，以积分和电子凭证为载体，通过金融权益、积分运营、营销支撑服务的商业模式，聚焦银行、保险、金融、传媒、互联网、通信等大型行业机构，集合生活服务类优质品牌资源，提供上下游一体的综合权益营销解决方案，提升用户体验，创造社会价值。构建“跨地域、跨品牌、多元化、融合性”的以“产业互联、创新融合”
            的多方共赢的生态模式。
          </p>
        </div>
      </div>
    </div>
    <!-- 荣誉资质 -->
    <div class="honor w-1200">
      <h3>荣誉资质</h3>
      <!-- 奖杯 -->
      <ul class="trophy flex flex-between">
        <li :key="item.id" v-for="item in aboutus">
          <img :src="item.src" alt="abaout" width="300" height="340" />
          <p>{{ item.cont }}</p>
        </li>
        <!-- <li>
          <img
            src="@/assets/img/trophy-1.png"
            width="300"
            height="340"
            alt="!"
          />
          <p>中国银联A类优秀供应商</p>
        </li>
        <li>
          <img
            src="@/assets/img/trophy-2.png"
            width="300"
            height="340"
            alt="!"
          />
          <p>2018年号卡新零售创新奖</p>
        </li>
        <li>
          <img
            src="@/assets/img/trophy-3.png"
            width="300"
            height="340"
            alt="!"
          />
          <p>虚拟运营商计费业务最佳服务奖</p>
        </li>
        <li>
          <img
            src="@/assets/img/trophy-4.png"
            width="300"
            height="340"
            alt="!"
          />
          <p>阿里汽车优秀服务商</p>
        </li> -->
      </ul>
      <!-- 证书 -->
      <ul class="certificate flex flex-between flex-wrap">
        <li :key="item.id" v-for="item in certificate">
          <img :src="item.src" alt="certificate" width="300" height="340" />
          <p>{{ item.cont }}</p>
        </li>
        <!-- <li>
          <img src="@/assets/img/jz-1.png" width="300" height="340" alt="!" />
          <p>“国家级高新技术企业”证书</p>
        </li>
        <li>
          <img src="@/assets/img/jz-2.png" width="300" height="340" alt="!" />
          <p>软件企业认定证书</p>
        </li>
        <li>
          <img src="@/assets/img/jz-3.png" width="300" height="340" alt="!" />
          <p>软件企业</p>
        </li>
        <li>
          <img src="@/assets/img/jz-4.png" width="300" height="340" alt="!" />
          <p>国家信息安全等保三级认证</p>
        </li>
        <li>
          <img src="@/assets/img/jz-5.png" width="300" height="340" alt="!" />
          <p>质量管理体系认证证书</p>
        </li>
        <li>
          <img src="@/assets/img/jz-6.png" width="300" height="340" alt="!" />
          <p>山东省软件和信息服务业协会会员单位</p>
        </li>
        <li>
          <img src="@/assets/img/jz-7.png" width="300" height="340" alt="!" />
          <p>增值电信业务经营许可证</p>
        </li>
        <li>
          <img src="@/assets/img/jz-8.png" width="300" height="340" alt="!" />
          <p>跨地区增值电信业务经营许可证</p>
        </li> -->
      </ul>
    </div>
    <!-- 地址 -->
    <div class="address bgc-fb flex flex-between">
      <img src="@/assets/img/dt.png" width="853" height="500" alt="!" />
      <div class="addr-site">
        <h3>联系我们</h3>
        <ul class="flex flex-column">
          <li :key="item.id" v-for="item in place">
            <img :src="item.src" alt="place" width="50" height="50" />
            <p>{{ item.cont }}</p>
            <p>{{ item.num }}</p>
          </li>
          <!-- <li>
            <img src="@/assets/img/dz.png" width="50" height="50" alt="!" />
            <div>
              <p>地址</p>
              <p>山东省烟台市莱山区飞龙天润大厦14F</p>
            </div>
          </li>
          <li>
            <img src="@/assets/img/sw.png" width="50" height="50" alt="!" />
            <div>
              <p>商务合作</p>
              <p>156-6806-1789范经理（微信同号）</p>
            </div>
          </li>
          <li>
            <img src="@/assets/img/kf.png" width="50" height="50" alt="!" />
            <div>
              <p>客服电话（7*24小时）</p>
              <p>400-081-7007</p>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'About-us',
  data() {
    return {
      aboutus: [
        {
          src: require('@/assets/img/trophy-1.png'),
          cont: '中国银联A类优秀供应商'
        },
        {
          src: require('@/assets/img/trophy-2.png'),
          cont: '2018年号卡新零售创新奖'
        },
        {
          src: require('@/assets/img/trophy-3.png'),
          cont: '虚拟运营商计费业务最佳服务奖'
        },
        {
          src: require('@/assets/img/trophy-4.png'),
          cont: '阿里汽车优秀服务商'
        }
      ],
      certificate: [
        {
          src: require('@/assets/img/jz-1.png'),
          cont: '“国家级高新技术企业”证书'
        },
        {
          src: require('@/assets/img/jz-2.png'),
          cont: '软件企业认定证书'
        },
        {
          src: require('@/assets/img/jz-3.png'),
          cont: '软件企业'
        },
        {
          src: require('@/assets/img/jz-4.png'),
          cont: '国家信息安全等保三级认证'
        },
        {
          src: require('@/assets/img/jz-5.png'),
          cont: '质量管理体系认证证书'
        },
        {
          src: require('@/assets/img/jz-6.png'),
          cont: '山东省软件和信息服务业协会会员单位'
        },
        {
          src: require('@/assets/img/jz-7.png'),
          cont: '增值电信业务经营许可证'
        },
        {
          src: require('@/assets/img/jz-8.png'),
          cont: '跨省区增加电信业务经营许可证'
        }
      ],
      place: [
        {
          src: require('@/assets/img/dz.png'),
          cont: '地址',
          num: '山东省烟台市莱山区飞龙天润大厦14F'
        },
        {
          src: require('@/assets/img/sw.png'),
          cont: '地址',
          num: '156-6806-1789范经理（微信同号）'
        },
        {
          src: require('@/assets/img/kf.png'),
          cont: '客服电话（7*24小时）',
          num: '400-081-7007'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
/* ===== banner start =====*/
.banner {
  margin-top: 80px;
  height: 250px;
  width: 100%;
  background: #fff url("@/assets/img/aboutUs-banner.png") no-repeat center/cover;
}
.top {
  background-color: #fff;
}

.top .nav a {
  color: #999;
}

.top .nav a:hover {
  color: #ff7200;
}
// @import '../assets/css/about-us.css'

.bdra6 {
  border-radius: 6px;
}

/* banner-style start */
/* ======= container start ======= */
.container .we {
  padding: 82px 0 172px;
}
.we h3 {
  margin-bottom: 62px;
  text-align: center;
}
.reception-text {
  box-sizing: border-box;
  width: 719px;
  top: 230px;
  left: 481px;
  padding: 48px 56px 56px;
  background-color: #fff;
  border-radius: 6px;
}
.subtitle h4 {
  font-weight: 400;
  color: #ff7200;
  font-size: 24px;
}
.subtitle:after {
  display: inline-block;
  content: "";
  vertical-align: middle;
  width: 36px;
  height: 3px;
  background-color: #ff7200;
}
.reception-text p {
  line-height: 30px;
  text-align: justify;
  font-size: 16px;
  color: #666;
}
.reception-text img {
  border-radius: 6px;
}
/* ======= honor start ======= */
.honor {
  padding: 104px 0 160px;
}
.honor h3 {
  padding-bottom: 72px;
  text-align: center;
}
.trophy li,
.certificate li {
  transition: 1s;
}
.trophy li:hover,
.certificate li:hover {
  transform: scale(1.1);
}
.trophy li p,
.certificate li p {
  line-height: 16px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
/* ======= address start ======= */
.address {
  align-items: stretch;
}
.addr-site {
  padding-top: 76px;
  padding-right: 556px;
}
.addr-site h3 {
  margin-bottom: 56px;
}
.addr-site ul li {
  display: flex;
  justify-content: start;
  margin-bottom: 40px;
  width: 400px;
  line-height: 25px;
  font-size: 16px;
  color: #666;
}
.addr-site li img {
  margin-right: 28px;
}
</style>
